<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒模型</title>
    <style>
        div{
            /* 宽度默认100%，高度由文本撑高 */
            width: 100px;
            height: 100px;
            padding: 10px 20px;
            border: 10px solid red;
            margin: 100px 200px 300px 400px;
            background: yellow;
        }
    </style>
</head>
<body>
    <div>哈喽</div>
    <!-- 盒模型 = 内容 content + 内填充 padding + 边框 border + 外间距 margin
            - width、height为内容的宽高！！！
            - padding
                - 遵循“上右下左”规律，可以缺省（找反义词）
                - padding-方位（left、right、top、bottom）
                - 注意：背景区域默认是从padding区域开始的
            - border: 边框宽度 边框样式 边框颜色
            - margin
                - 遵循“上右下左”规律，可以缺省（找反义词）
                - margin-方位（left、right、top、bottom）

            - 什么时候给盒子加padding，什么时候给盒子加margin？
                - 有边框，边框内padding，边框外margin
                - 有背景色，背景色内padding，背景色外margin
                - 其他情况随便
            
    -->
</body>
</html>